<template>
  <Card dis-hover :bordered="false" class="pt16 pb16">
    <div class="ivu-table-buttons" v-if="showButtonGroup">
      <ButtonGroup>
        <slot name="buttons"></slot>
      </ButtonGroup>
    </div>
    <Table
      :loading="loading"
      :draggable="draggable"
      border
      :columns="tableColumns"
      :data="tableData"
      :show-summary="showSummary"
      :summary-method="handleSummary"
      :disabled-hover="false"
      @on-select="onSelect"
      @on-select-cancel="onSelectCancel"
      @on-select-all="onSelectAll"
      @on-select-all-cancel="onSelectAllCancel"
      @on-selection-change="selectionChange"
      ref="table"
      :width="tableWidth"
      @on-drag-drop="onDragDrop"
      :height="height"
      :max-height="maxHeight"
      :no-data-text="nodatatext"
    >
      <!-- <div slot="tableLoop" slot-scope="{ row }" class="tableloop">
        <span slot="list" v-for="(item, index) in tableColumns" :key="index">
          <template v-if="item.tableLoop">
            <span
              class="ml10"
              :name="it.key"
              v-for="(it, inx) in row[item.tableLoop.kye]"
              :key="inx"
            >{{ it[item.tableLoop.loop] }}</span
            >
          </template>
        </span>
      </div> -->
      <!-- 操作按钮 -->
      <!-- <div slot="action" slot-scope="{ row }" class="act"></div> -->
      <!-- 开关按钮 -->
      <!-- <div slot-scope="{ row, column }" slot="switch">
        <i-switch
          :value="row[column.key]"
          @on-change="changeSwitch($event,row._index,column.key)"
          :true-value="typeof (row[column.key]) === 'string' ? '1' : 1"
          :false-value="typeof (row[column.key]) === 'string' ? '0' : 0"
          :disabled="row.isEdit == 0 ? true : false"></i-switch>
      </div> -->
    </Table>
    <div v-if="showPage" class="flex flex-x-end pt20">
      <!--      <Page
              :current="value.page.current"
              :total="value.total"
              :page-size="value.page.size"
              @on-change="changePage"
              @on-page-size-change="changeSize"
              show-total
              class="ivu-table-page"
              show-sizer
            ></Page>-->
      <el-pagination
        background
        @size-change="changeSize"
        @current-change="changePage"
        :current-page.sync="value.page.current"
        :page-sizes="pageSizes"
        :page-size.sync="value.page.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="value.total">
      </el-pagination>
    </div>
  </Card>
</template>

<script>
import {deepCopy, typeOf} from '../../libs/jss/tools'

export default {
  components: {},
  name: 'BaseTable',
  props: {
    loading: {
      type: Boolean,
      default: false,
    },
    value: {
      type: Object
    },
    data: {
      type: [Object, Array],
      default() {
        return {}
      }
    },
    columns: {
      type: Array,
      default() {
        return []
      }
    },
    selection: {
      type: [Boolean, String],
      default: false
    },
    maxHeight: {
      type: [Boolean, Number],
      default: 560
    },
    height: {
      type: [Boolean, Number],
      default: null
    },
    tableWidth: {
      type: [Number, String],
      default: ''
    },
    draggable: {
      type: Boolean,
      default: false
    },
    actionType: {
      type: String,
      default: ''
    },
    nodatatext: {
      type: String,
      default: '暂无数据'
    },
    // 是否需要分页
    isPage: {
      type: Boolean,
      default: true
    },
    pageSizes: {
      type: Array,
      default() {
        return [10, 20, 30, 40]
      }
    },
  },
  watch: {
    data(val) {
      if (this.showPage && val.length <= 0 && this.value.page.current !== 1) {
        this.value.page.current--
        this.$emit('on-search', this.value)
      }
    }
  },
  data() {
    return {
      showButtonGroup: false,
      actionProps: []
    }
  },
  created() {
    this.showButtonGroup = this.$slots.buttons !== undefined
  },
  methods: {
    handleSelectAll(status) {
      console.log('8888888888');
      this.$refs.table.selectAll(status)
    },
    changePage(v) {
      this.value.page.current = v
      this.$emit('on-search', this.value)
    },
    changeSize(v) {
      if (this.value.page.current * v > this.value.total) {
        this.value.page.current = 1
        this.changePage(this.value.page.current)
      } else {
        this.value.page.size = v
        this.$emit('on-search', this.value)
      }
    },
    handleSummary({columns}) {
      const sums = {}
      columns.forEach((column, index) => {
        const key = column.key
        if (index === 0) {
          sums[key] = {
            key,
            value: '合计'
          }
          return
        }
        let value = ''
        if (column.summaryRender && this.data.aggregates[key]) {
          value = column.summaryRender(this.data.aggregates[key].sum)
        }
        sums[key] = {
          key,
          value: value
        }
      })
      return sums
    },
    onSelect(selection, row) {
      const index = row.initRowIndex
      this.$refs.table.objData[index]._isHighlight = true
    },
    onSelectCancel(selection, row) {
      const index = row.initRowIndex
      this.$refs.table.objData[index]._isHighlight = false
      this.$emit('selectCancel', row)
    },
    onSelectAll() {
      for (var i in this.$refs.table.objData) {
        this.$refs.table.objData[i]._isHighlight = true
      }
    },
    onSelectAllCancel() {
      for (var i in this.$refs.table.objData) {
        this.$refs.table.objData[i]._isHighlight = false
        this.$emit('selectCancel', this.$refs.table.objData[i])
      }
    },
    selectionChange(selection) {
      this.$emit('selectionChange', selection)
    },
    getSelected() {
      let row = []
      for (var i in this.$refs.table.objData) {
        if (this.$refs.table.objData[i]._isChecked === true) {
          row.push(this.$refs.table.objData[i])
        }
      }
      return row
    },
    onDragDrop(first, end) {
      // // 转成int型，方便后续使用
      first = parseInt(first)
      end = parseInt(end)
      let tmp = this.tableData[first]
      if (first < end) {
        for (let i = first + 1; i <= end; i++) {
          this.$emit('dataSort', i - 1, 1, this.tableData[i])
          // this.datas.splice(i-1, 1, this.datas[i])
        }
        // this.datas.splice(end, 1, tmp)
        this.$emit('dataSort', end, 1, tmp, 'go')
      }

      if (first > end) {
        for (let i = first; i > end; i--) {
          // this.datas.splice(i, 1, this.datas[i - 1])
          this.$emit('dataSort', i, 1, this.tableData[i - 1])
        }
        // this.datas.splice(end, 1, tmp)
        this.$emit('dataSort', end, 1, tmp, 'go')
      }
    },
    changeSwitch(value, index, key) {
      this.tableData[index][key] = value;
      this.$emit('changeData', this.tableData, value)
    },
  },
  computed: {
    showSummary() {
      return !!this.data.aggregates
    },
    showPage() {
      return this.isPage && this.value.total
    },
    tableData() {
      let list = []
      if (typeOf(this.data) === 'array') {
        list = this.data
      } else {
        list = this.data.list || []
      }
      let data = list.map((item, index) => {
        let res = item
        res.initRowIndex = index
        return res
      })
      // console.log(data);
      return data
    },
    tableColumns() {
      let columns = deepCopy(this.columns)
      if (this.selection === true) {
        columns.unshift({
          type: 'selection',
          width: 60,
          align: 'center',
          fixed: "left",
        })
      }
      console.log(columns);
      return columns
    }
  }
}
</script>
<style lang="less" scoped>
@import "./index.less";
</style>
